<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/index.js'
import api from "@/api/api";
import addressItem from "@/components/my/addressItem.vue";

// 响应式数据
const list = ref([])

// 路由和状态管理
const router = useRouter()
const store = useUserStore()

// 方法定义
const onClickLeft = () => {
  router.back()
}

const goDetail = () => {
  router.push({
    path: "/addressDetail",
  })
}

const getAddresslist = async () => {
  let res = await api.user.getAddresslist()
  list.value = res
  store.setAddress(list.value)
}

// 生命周期钩子
onMounted(() => {
  getAddresslist()
})
</script>

<template>
  <div class="address_wrapper">
    <van-nav-bar title="收货信息" class="nav_bar" fixed left-arrow @click-left="onClickLeft" />
    <div class="list">
      <addressItem v-for="(v, i) in list" :key="i" :item="v" />
    </div>
    <div class="bottom">
      <div class="btn" @click="goDetail">添加收货地址</div>
    </div>
  </div>
</template>


<style lang="less" scoped>
.address_wrapper {
  min-height: 100vh;
  background: url("https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/29/4431a33cd62f4efc9fc53a7606eee382.png") no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  box-sizing: border-box;
  padding: 200px 50px 260px 50px;

  :deep(.van-nav-bar__content) {
    height: 100px;
    margin: 25px auto;
  }

  :deep(.van-nav-bar__title) {
    font-size: 54px;
    font-weight: 500;
  }

  :deep(.van-ellipsis) {
    overflow: initial;
  }

  :deep(.van-nav-bar__arrow) {
    font-size: 60px;
  }

  :deep(.van-nav-bar__left) {
    left: 30px;
  }

  .bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 30px 50px 80px 50px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;

    .btn {
      background: #058efb;
      width: 100%;
      padding: 40px 0;
      font-size: 48px;
      color: #fff;
      border-radius: 999px;
      text-align: center;
      font-weight: bold;
    }
  }
}
</style>
